<template>
  <div class="m-3">
    <Row :gutter="10">
      <Col :span="12">
        <VxeBasicTable
          ref="tableRef"
          v-bind="gridOptions"
          @checkbox-change="checkboxChange"
          @checkbox-all="checkboxChange"
          @current-change="onCurrentChange"
          @data-change="onDataChange"
      /></Col>
      <Col :span="12">
        <Card title="关联供应商" :bodyStyle="{ height: '700px', 'padding-top': '18px' }">
          <WithInSupplier :currentRow="currentRow" @success="handleSuccess" />
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
  import { Row, Col, Card } from 'ant-design-vue';
  import { VxeBasicTable } from '@mxpio/components';
  import { supplychainItemPage } from '@mxpio/bizcommon';
  import { useListCrud } from '@mxpio/common';
  import { columns, searchFormSchema } from './byItem.data';
  import WithInSupplier from './WithInSupplier.vue';
  import { ref } from 'vue';

  const componentName = 'SupplyChainsByItem';
  defineOptions({ name: componentName });
  const currentRow = ref<Recordable>({});
  const { tableRef, gridOptions, checkboxChange, handleSuccess } = useListCrud({
    componentName,
    columns,
    searchFormSchema,
    pageApi: supplychainItemPage,
    rowConfig: {
      keyField: 'itemCode',
    },
    module: 'erp',
    toolbarConfig: {
      buttons: [],
      tools: [],
    },
    filters: {
      'itemSource@EQ': '2',
    },
  });

  function onCurrentChange({ row }) {
    currentRow.value = row;
  }

  function onDataChange({ visibleData }) {
    const itemCode = currentRow.value?.itemCode;
    currentRow.value = {};
    visibleData.forEach((item) => {
      if (item.itemCode === itemCode) {
        currentRow.value = item;
      }
    });
    tableRef.value?.setCurrentRow(currentRow.value);
  }
</script>
